<template>
	<div class="search-songs">
		<ul v-for="(entry, index) in sortList" :data-id="entry.id">
			<li><span class="glyphicon glyphicon-expand" @click="play(index)"></span></li>
			<li v-for="key in columns" :title="entry[key]">
				{{entry[key]}}
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				columns: ['name', 'artists', 'album', 'duration'],
				data: null
			}
		},
		computed: {
			sortList: function() {
				var list = []
				if(this.data) {
					this.data.songs.forEach(function(value) {
						var id = value.id
						var name = value.name
						var artists = []
						value.artists.forEach(function(item) {
							artists.push(item.name)
						})
						artists = artists.join(' / ')
						var album = value.album.name
						var duration = new Date(value.duration).format('mm:ss')
						var data = {
							id: id,
							name: name,
							artists: artists,
							album: album,
							duration: duration
						}
						list.push(data)
					})
				}
				return list
			}
		},
		methods: {
			play: function(index) {
				var id = this.sortList[index].id
				var that = this
				this.$store.dispatch('play', {
					id: id
				}).then(function(response) {
					that.$Hub.$emit('load', response.body.data[0].url)
				})
			}
		}
	}
</script>

<style>
	div.search-songs ul {
		display: inline-block;
		height: 30px;
		font-size: 12px;
		padding: 8px 0px;
		margin: 0px;
	}
	
	div.search-songs ul:nth-child(2n) {
		border: 1px solid #fff;
		background: #f7f7f7;
		border-color: #f7f7f7;
	}
	
	div.search-songs ul li:nth-child(1) {
		width: 30px;
		text-align: center;
	}
	
	div.search-songs ul li:nth-child(2) {
		width: 340px;
		text-align: left;
	}
	
	div.search-songs ul li:nth-child(3) {
		width: 120px;
	}
	
	div.search-songs ul li:nth-child(4) {
		width: 180px;
	}
	
	div.search-songs ul li:nth-child(5) {
		width: 100px;
	}
	
	div.search-songs ul li {
		display: block;
		width: 95px;
		height: 30px;
		float: left;
		padding: 0px;
	}
	
	div.search-songs ul li {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>